<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd,td,th,form,input,select,textarea{margin:0;padding:0; font-size:12px;}
a{text-decoration:none;outline:none;}
img{vertical-align:top;border:none;}
li{list-style:none;}
table{border-collapse:collapse;}
textarea{resize:none; outline:none; overflow:auto;}

.clear{zoom:1;}
.clear:after{content:''; display:block;clear:both;}
/* css reset */

body{background:#ccc; margin:0;}
#div1{width:100%;position:absolute;text-align:center;bottom:0;}
img{vertical-align:bottom;border:none;}
#div1 img{width:64px;}

#work{height:80px;width:64px;background:url(images/intro.png);position:absolute;top:50%;left:20px;}
#mask{height:100%;width:100%;position:absolute;top:0;left:0;background: #000; opacity: 0.7;filter:alpha(opacity=70);display:none;z-index:10000;}
#wMenu{/*height:500px;*/height:0px;width:0px;border:10px solid #fff;border-bottom:40px solid #fff;background:url(images/wbg.png) no-repeat;position:absolute;top:0;left:0;display:none;z-index:10001;}
.list{color:#666;position:relative;opacity:0;filter:alpha(opacity=0);}
.list a{color:#333;}
.list a:visited{color:#055AAF;}
.list a:hover{color:#055AAF;text-decoration:underline;}
.list a:active{color:#006;}
.list dl{padding:8px 8px; }
.list dt{height:20px;line-height:20px;font-size:18px;font-weight:bold;}
.list dd{line-height:20px;font-size:14px;}
.list .close{width:66px;height:22px;position:absolute;top:540px;right:10px;background:url(images/closelabel.gif);}
.list p{line-height:14px;font-size:12px;color:#00F;font-weight:bold;padding:8px 8px;}
/* work introduction */
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload=function(){
	var oDiv=document.getElementById('div1');
	var aImg=oDiv.getElementsByTagName('img');
	
	document.onmousemove=function(ev){
		var ev=ev||window.event;
		for(var i=0;i<aImg.length;i++){
			var x=aImg[i].offsetLeft+aImg[i].offsetWidth/2;
			var y=aImg[i].offsetTop+aImg[i].offsetHeight/2+oDiv.offsetTop;
			
			var a=ev.clientX-x;
			var b=ev.clientY-y;
			
			var c=Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
			var scale=1-c/300;
			if(scale<0.5){
				scale=0.5;
			}
			aImg[i].style.width = scale * 128 + 'px';
			aImg[i].style.height = scale * 128 + 'px';
		}
	}
	var workIntro=(function(){
		var oWork=document.getElementById('work');
		var oMask=document.getElementById('mask');
		var oMenu=document.getElementById('wMenu');
		var oList=getByClass('list')[0];
		var oClose=getByClass('close')[0];
		function rePos(){
			bindEvent(window,'resize',menuMove);
			bindEvent(window,'scroll',menuMove);
			function menuMove(){
				var iH=Math.max(viewH(),scrollH());
				var iLeft=Math.ceil((viewW()-oMenu.offsetWidth)/2);
				var iTop=Math.ceil((viewH()-oMenu.offsetHeight)/2+scrollY());
				oMask.style.height=iH+'px';
				startMove(oMenu,{top:iTop,left:iLeft})
			
			}
		}
		
		function btnClick(){
			oWork.onclick=function(){			
				oMask.style.display='block';
				oMenu.style.display='block';
				oMenu.style.left=(viewW()-oMenu.offsetWidth)/2+'px';
				oMenu.style.top=(viewH()-oMenu.offsetHeight)/2+'px';
				iLs=Math.ceil((viewW()-450)/2);
				iTs=Math.ceil((viewH()-590)/2);
				startMove(oMenu,{height:540,top:iTs},function(){
					startMove(oMenu,{width:430,left:iLs},function(){
						startMove(oList,{opacity:100});
					});
				});
			}
		
		};
		
		function closeClick(){
			oClose.onclick=function(){
				oList.style.opacity=0;
				oList.style.filter = 'alpha(opacity=' +0+ ')';
				oMenu.style.top=0;
				oMenu.style.height=0;
				oMenu.style.width=0;
				oMask.style.display='none';
				oMenu.style.display='none';
				
			}
		}
		
		return{
			c:closeClick,
			b:btnClick,
			r:rePos
		}
	})();
	workIntro.c();
	workIntro.b();
	workIntro.r();

}

</script>
</head>

<body>
<div id="div1">
	<img src="images/1.png"/>
    <img src="images/2.png"/>
    <img src="images/3.png"/>
    <img src="images/4.png"/>
    <img src="images/5.png"/>
</div>

<div id="work"></div>
<div id="mask"></div>
<div id="wMenu">
	<div class="list">
        <dl>
            <dt><a href="#">1.模仿360新建页制作JS效果</a></dt>
            <dd>a)用JsonP跨域请求百度数据，制作搜索框；</dd>
            <dd>b)用Ajax制作天气预报效果；</dd>
            <dd>c)制作更换背景功能，并记录cookie；</dd>
            <dd>d)动态设置图片格子数，并记录cookie；</dd>
            <dd>e)图片可任意交换位置，可随机交换位置；</dd>
            <dd>f)制作图片格子内部轮播图效果。</dd>
        </dl>
        <dl>
            <dt><a href="others/b.qq/index.html">2.模仿企业QQ整站</a></dt>
            <dd>a)标签的选择方面，注重标签的语义化</dd>
            <dd>b)CSS命名方面，运用加前缀的方法区分样式所属页面、避免冲突；</dd>
            <dd>c)CSS样式规划方面，考虑扩展性，多用组合，少用继承。</dd>
            <dd>e)处理各浏览器的兼容问题，兼容IE6~10，firefox，chrome等。</dd>
        </dl>
        <dl>
            <dt><a href="others/UC/index.html">3.模仿UC首页</a></dt>
            <dd>a)用JS原生实现首页所有效果</dd>
            <dd>b)用运动框架制作首页轮播图、网站地图以及下拉菜单</dd>
        </dl>
        <dl>
            <dt>4.零散demo</dt>
            <dd><a href="../magnifier/index.html">a)放大镜效果；</a></dd>
            <dd><a href="../jumpMenu/index.html">b)可拖拽弹性跳动窗口；</a></dd>
            <dd><a href="../appleMenu/index.html">c)苹果菜单效果</a></dd>
            <dd><a href="1.html">d)常见轮播图效果合集</a></dd>
			<dd><a href="../delay/delay.html">e)延迟加载效果</a></dd>
        </dl>
        <p>说明：此网站内各模仿页面仅用来展示个人作品，不用于任何商业用途</p>
        <div class="close"></div>
    </div>
</div>
</body>
</html>
